<template>
  <div>
    <div class="home-ruler-box">
      <img
        class="home-ruler-img"
        src="https://tyut-calendar.oss-accelerate.aliyuncs.com/newimg/ruler_new.png"
        alt=""
      /><br />
      <span
        @click="rulerIndexClicked"
        v-for="(item, index) in wordList"
        :key="index"
        :index="index"
        >{{ item }}</span
      >
      <div class="home-ruler-icon" :style="{ left: iconLeft + 'px' }"></div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "HomeRuler",
  computed: {
    ...mapState({
      rulerIndex: (state) => state.ruler.index,
    }),
    rulerIndexMap() {
      return this.rulerIndex;
    },
  },
  mounted() {
    //  根据路由修改卡尺的位置，这里是为了保证刷新不出现偏差
    const routeRulerArray = [
      ["/Strihp", 260],
      ["/", -10],
    ];
    this.rulerIndexChaneg(this.$route.path, routeRulerArray);
  },
  watch: {
    //  监听路由修改卡尺的位置
    $route(to, from) {
      if (to.path == "/") {
        this.iconLeft = -10;
        this.$store.commit("ruler/index", 0);
      }
    },
    // 监听vuex修改卡尺位置
    rulerIndexMap(newData, oldData) {
      const storeRulerArray = [
        [0, -10],
        [1, 260],
        [2, 530],
        [3, 920],
      ];
      this.rulerIndexChaneg(newData, storeRulerArray);
    },
  },
  data() {
    return {
      iconLeft: 0,
      wordList: ["精选活动", "学院日历", "学院日历", "学院日历"],
    };
  },
  methods: {
    rulerIndexChaneg(param, dataArray) {
      const map = new Map(dataArray);
      this.iconLeft = map.get(param) | 0;
    },
    // 点击卡尺修改位置
    rulerIndexClicked(e) {
      let index = e.target.getAttribute("index");
      if (index == 0) {
        this.$store.commit("ruler/indexChange", 0);
        this.$router.push("/");
        return;
      }
      // 这里由于index刚好跟vuex的索引成对应关系,所以可以直接修改为index
      this.$store.commit("ruler/indexChange", Number(index));
      this.$router.push("/Strihp");
    },
  },
};
</script>

<style lang="less" scoped>
.home-ruler-box {
  position: absolute;
  width: 1170px * @to-px;
  bottom: 20px;
  cursor: default;
  left: 420px;
  span {
    position: relative;
    color: white;
    top: 0px;
    left: 0;
    white-space: nowrap;
    // 增加可点击区域
    border-top: 40px solid transparent;
    border-right: 150px solid transparent;
  }
  span:nth-of-type(1) {
    margin-right: 30px;
  }
  span:nth-of-type(2) {
    margin-right: 55px;
  }
  span:nth-of-type(3) {
    margin-right: 140px;
  }
  span:nth-of-type(4) {
    border-right: 0px solid transparent;
  }
  .home-ruler-img {
    position: relative;
    left: 0;
  }
  .home-ruler-icon {
    position: absolute;
    bottom: 40px;
    width: 20px;
    height: 20px;
    .bg-maker();
    background-image: url("https://tyut-calendar.oss-accelerate.aliyuncs.com/newimg/icon-ruler_new.png");
    transition: all 0.75s;
  }
  @media screen and (max-width: 480px) {
    .home-ruler-box,
    .home-ruler-icon,
    .home-ruler-img {
      display: none !important;
    }
  }
}
</style>
